package com.devo.icecream.ui.widget

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import com.devo.icecream.ui.theme.Main
import com.devo.icecream.utils.noRippleClickable
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.PagerState
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.delay

@OptIn(ExperimentalPagerApi::class)
@Composable
fun AppPageView(
    modifier: Modifier = Modifier,
    auto: Boolean = false,
    urls: List<String> = listOf(),
    onItemClick: (index: Int) -> Unit = {}
) {

    val index = remember(urls) {
        mutableStateOf(urls.size)
    }

    val pagerState = rememberPagerState()

    Box(
        modifier = Modifier
            .then(modifier)
            .fillMaxSize()
    ) {
        HorizontalPager(modifier = Modifier.fillMaxSize(), count = urls.size, state = pagerState) {
            AsyncImage(
                modifier = Modifier
                    .fillMaxHeight()
                    .noRippleClickable { onItemClick(it) },
                model = urls[it],
                contentScale = ContentScale.FillBounds,
                contentDescription = ""
            )
        }
        Column(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 32.dp),
        ) {

            PagerIndicator(
                pagerState = pagerState
            )

        }
    }

    if (auto) {
        LaunchedEffect(null) {
            while (true) {
                delay(5 * 1000)
                index.value += 1
                if (pagerState.pageCount > 0) {
                    pagerState.animateScrollToPage(index.value % pagerState.pageCount)
                }
            }
        }
    }
}

@OptIn(ExperimentalPagerApi::class)
@Composable
private fun PagerIndicator(modifier: Modifier = Modifier, pagerState: PagerState) {
    LazyRow(modifier = Modifier.then(modifier)) {
        itemsIndexed((0 until pagerState.pageCount).toList()) { index, _ ->
            if (index > 0) {
                Spacer(modifier = Modifier.width(10.dp))
            }
            Box(
                modifier = Modifier
                    .size(18.dp)
                    .clip(CircleShape)
                    .background(
                        if (index == pagerState.targetPage) Main else Color.White
                    ),

                )
        }
    }
}
